<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .box {
            text-align: center;
            margin:100px auto;
        }
        span {
            display: inline-block;
            width: 150px;
            height: 20px;
            border: 1px solid #ccc;
            font-size:12px;
            line-height: 20px;
            text-align: left;
            padding-left: 20px;
            background-color: #eee;
            color:#999;
        }
        .right {  /*正确的*/
            color: #5EFF5E;
            background:url(images/right.png) no-repeat #DFFFDF 4px 3px;
            border: 1px solid #ACFFAC;
        }
        .wrong {  /*错误的*/
            background:url(images/wrong.png) no-repeat #FFDCD0 4px 3px;
            border: 1px solid #FFAC91;
            color: #FF6B39;
        }
    </style>
    <script>
        window.onload = function(){
            function $(id){return document.getElementById(id);}

            $("txt").focus();   //获得焦点
            $("sele").onmousemove = function(){
                this.select();  //选择
            }

            $("txt").onblur = function(){
                if(this.value == "")
                {
                    $("result").className = "wrong";
                    $("result").innerHTML = "内容不能为空"
                }
                else if(isNaN(this.value))
                {
                    $("result").className = "wrong";
                    $("result").innerHTML = "请输入数字"
                }
                else if(this.value>100 || this.value<0)
                {
                    $("result").className = "wrong";
                    $("result").innerHTML = "请输入合理的范围"
                }
                else
                {
                    $("result").className = "right";
                    $("result").innerHTML = "输入正确"
                }
            }
        }
    </script>
</head>
<body>
    <div class="box">
        语文: <input type="text" name="" id="txt">
        <span id="result">请输入成绩</span>
        <p>鼠标经过选择表单:</p>
        <input type="text" name="" id="sele">
    </div>
</body>
</html>